import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { DetailsList } from 'office-ui-fabric-react';
import {
  TextField,
  PrimaryButton,
  DefaultButton,
  Toggle,
  DetailsListLayoutMode,
  CheckboxVisibility,
  Selection
} from 'office-ui-fabric-react';
import Section from '../../components/Section';

const columns = [
  {
    key: 'group',
    fieldName: 'group',
    name: '组',
    minWidth: 150
  },
  {
    key: 'field',
    fieldName: 'name',
    name: '名称',
    minWidth: 150
  },
  {
    key: 'label',
    fieldName: 'label',
    name: '标题',
    minWidth: 250
  },

  {
    key: 'required',
    fieldName: 'required',
    name: '必填',
    minWidth: 150
  }
];

class FieldEditor extends Component {
  constructor(props) {
    super(props);

    this.state = { group: '', name: '', label: '', required: true };
    this.selection = new Selection();
    this.nameInput = React.createRef();
  }

  onGroupChanged = (e, value) => {
    this.setState({ group: value });
  };

  onNameChanged = (e, value) => {
    this.setState({ name: value });
  };

  onLabelChanged = (e, value) => {
    this.setState({ label: value });
  };

  onRequiredChanged = (e, value) => {
    this.setState({ required: value });
  };

  handleAddField = field => {
    const { onAddField } = this.props;
    onAddField && onAddField(field);
  };

  handleRemoveField = () => {
    const { onRemoveField } = this.props;
    onRemoveField && onRemoveField(this.selection.getSelection());
  };

  handleSubmit = e => {
    e.preventDefault();
    this.handleAddField({ ...this.state });
    this.setState({ name: '', label: '' });
    this.nameInput.current.focus();
  };

  render() {
    return (
      <div>
        <Section title="增加字段" style={{ width: 500, margin: '1em auto' }}>
          <form onSubmit={this.handleSubmit}>
            <TextField underlined label="组" value={this.state.group} onChange={this.onGroupChanged} />
            <TextField
              underlined
              label="名称"
              required={true}
              componentRef={this.nameInput}
              value={this.state.name} onChange={this.onNameChanged}
            />

            <TextField
              underlined
              label="标题"
              required={true}
              value={this.state.label} onChange={this.onLabelChanged}
            />
            <Toggle
              label="必填"
              defaultChecked={true}
              required={true}
              value={this.state.required} onChange={this.onRequiredChanged}
            />

            <PrimaryButton type="submit" text="确定" />
          </form>
        </Section>
        <Section title="字段列表">
          <DefaultButton text="删除" onClick={this.handleRemoveField} />
          <DetailsList
            styles={{ root: { height: 400 } }}
            items={this.props.fields}
            columns={columns}            
            checkboxVisibility={CheckboxVisibility.always}
            layoutMode={DetailsListLayoutMode.fixedColumns}
            selection={this.selection}
          />
        </Section>
      </div>
    );
  }
}

FieldEditor.defaultProps = {
  fields: []
};

FieldEditor.propTypes = {
  fields: PropTypes.array,
  onAddField: PropTypes.func,
  onRemoveField: PropTypes.func
};

export default FieldEditor;
